import { ref } from 'vue'
// 导入监控元素是否进入可视区域函数
import { useIntersectionObserver } from '@vueuse/core'
/**
     * 监控元素是否进入可视区域
     * 1.通过回调函数 isIntersecting 判断组件或元素是否进入可视区域
     * 2.监控一直在执行(第一次进入的时候,发请求(只发一次请求))
     */
export const useObserver = (apiFn) => {
  const target = ref(null)
  const { stop } = useIntersectionObserver(
    target,
    ([{ isIntersecting }]) => {
      // targetIsVisible.value = isIntersecting
      // isIntersecting 是否进入可视区域  true 进入 | false 离开
    //   console.log(isIntersecting)
      if (isIntersecting) {
        // 调用获取数据的api
        apiFn()
        // 关闭监控
        stop()
      }
    },
    {
      threshold: 0
    }
  )
  return { target }
}
